<template>
  <div class="logo">
    <router-link :to="{name:'dashboard'}">

      <!-- update-begin- author:sunjianlei --- date:20190814 --- for: logo颜色根据主题颜色变化 -->
      <img v-if="navTheme === 'dark'" src="~@/assets/logo-white.png" alt="logo">
      <img v-else src="~@/assets/logo_font.png" alt="logo">
      <!-- update-begin- author:sunjianlei --- date:20190814 --- for: logo颜色根据主题颜色变化 -->

      <div class="title-font" v-if="showTitle">
        <span class="name">{{ title }}</span>
        <div class="clear"></div>
        <span class="english">{{english}}</span>
      </div>
    </router-link>
  </div>
</template>

<script>
  import { mixin } from '@/utils/mixin.js'

  export default {
    name: 'Logo',
    mixins: [mixin],
    props: {
      title: {
        type: String,
        default: '安管信息系统',
        required: false
      },
      english: {
        type: String,
        default: 'Security management information system',
        required: false
      },
      showTitle: {
        type: Boolean,
        default: true,
        required: false
      }
    }
  }
</script>
<style lang="less" scoped>
  /*缩小首页布 局顶部的高度*/
  @height: 79px;

  .sider {
    box-shadow: none !important;

    .logo {
      height: @height !important;
      line-height: @height !important;
      box-shadow: none !important;
      transition: background 300ms;
      a {
        color: white;

        &:hover {
          color: rgba(255, 255, 255, 0.8);
        }
      }

      img {
        float: left;
        height:60px;
        margin: 10px 10px 0px 10px
      }

      .title-font {
        float: left;
        width: 200px;
        line-height: 30px;
        span{
          display:block;
          width:100%;
        }
        .english{
          transform: scale(0.75);
          white-space: nowrap;
          font-size: 12px;
          margin-left: -25px;
          margin-top:-5px;
          font-weight: bold;
          font-family: Arial;
          text-shadow:1px 1px 5px #000;
        }
        .name {
          margin:17px 0px 0px 0px;
          font-size: 26px;
          font-weight: bold;
          line-height: 30px;
          white-space: nowrap;
          letter-spacing:5px;
          text-shadow:1px 1px 5px #000;
        }

      }
    }

    &.light .logo {
      background-color: @primary-color;
    }
  }
</style>